<template>
  <div>
    <div>
      菜单管理
    </div>
    <div class="search-box">
      <el-form ref="filter" label-width="70px" label-position="left" :model="filter" style="display: flex">
        <el-form-item label="菜单名称">
          <el-input v-model="filter.title" size="small" style="width:200px;margin-right:20px;"></el-input>
        </el-form-item>
      </el-form>
      <el-button size="small" type="warning" @click="search">查询</el-button>
      <el-button size="small" type="" @click="reset">重置</el-button>
      <el-button size="small" type="primary" @click="addUser">新增</el-button>
    </div>
    <!--参数列表-->
    <div style="overflow:hidden;border-top:1px solid #ccc">
      <el-table :data="menuList" stripe style="width:100%" v-loading="loading">
        <el-table-column prop="menuName" label="菜单名称" min-width="200"></el-table-column>
        <el-table-column prop="parentId" label="父级菜单" :formatter="findParentName" min-width="200"></el-table-column>
        <el-table-column label="菜单级别" min-width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.menuGrade == '1'">一级菜单</span>
            <span v-if="scope.row.menuGrade == '2'">二级菜单</span>
          </template>
        </el-table-column>
        <el-table-column prop="menuPicUrl" label="菜单图标地址" min-width="200"></el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="editUser(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页功能-->
      <el-pagination
        style="margin-top:20px;justify-content:flex-end;display:flex;"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--新增弹窗-->
    <el-dialog title="新增菜单" :visible.sync="addDialogVisible" width="30%" :close-on-click-modal="false">
      <el-form :model="addForm" ref="addForm" :rules="addRules" label-width="80px" >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="addForm.menuName" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单级别" prop="menuGrade">
          <el-select v-model="addForm.menuGrade" placeholder="请选择菜单级别">
            <el-option label="一级菜单" value="1"></el-option>
            <el-option label="二级菜单" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父级菜单" prop="parentId" v-if="addForm.menuGrade == '2'">
          <el-select v-model="addForm.parentId">
            <el-option v-for="(item,index) in gradeList"
                       :key="index"
                       :label="item.menuName"
                       :value="item.menuId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" prop="jumpPath">
          <el-input v-model="addForm.jumpPath" placeholder="请输入菜单地址"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="menuPicUrl">
          <el-input v-model="addForm.menuPicUrl" placeholder="请输入菜单图标"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addCancel">取 消</el-button>
        <el-button size="small" type="primary" @click="addSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改弹窗-->
    <el-dialog title="新增菜单" :visible.sync="editDialogVisible" width="30%" :close-on-click-modal="false">
      <el-form :model="editForm" ref="editForm" :rules="editRules" label-width="80px" >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="editForm.menuName" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单级别" prop="menuGrade">
          <el-select v-model="editForm.menuGrade" placeholder="请选择菜单级别" disabled>
            <el-option label="一级菜单" value="1"></el-option>
            <el-option label="二级菜单" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父级菜单" prop="parentId" v-if="editForm.menuGrade == '2'">
          <el-select v-model="editForm.parentId" disabled>
            <el-option v-for="(item,index) in gradeList"
                       :key="index"
                       :label="item.menuName"
                       :value="item.menuId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" prop="jumpPath">
          <el-input v-model="editForm.jumpPath" placeholder="请输入菜单地址"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="menuPicUrl">
          <el-input v-model="editForm.menuPicUrl" placeholder="请输入菜单图标"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editCancel">取 消</el-button>
        <el-button size="small" type="primary" @click="editSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import server from '../../services/index'
  export default {
    components: {},
    data () {
      return {
        filter:{
          title:"",
        },
        menuList: [],
        loading: false,
        total: 0,
        currentPage: 1,
        pageSize: 10,
        gradeList: [],
        lastGradeId: "",
        lastMenuId: "",
        addDialogVisible: false,
        addForm: {
          menuName:"",
          parentId:"",
          menuGrade:"",
          jumpPath:"",
          menuPicUrl:"",
        },
        addRules: {
          menuName: [
            { required: true, message: '菜单名称！', trigger: ['blur', 'change'] },
          ],
          menuGrade: [
            { required: true, message: '请选择菜单级别！', trigger: ['blur', 'change'] },
          ],
          parentId: [
            { required: true, message: '请选择父级菜单！', trigger: ['blur', 'change'] },
          ],
        },
        editDialogVisible: false,
        editForm: {
          id:"",
          menuName:"",
          parentId:"",
          menuGrade:"",
          jumpPath:"",
          menuPicUrl:"",
        },
        editRules: {
          menuName: [
            { required: true, message: '菜单名称！', trigger: ['blur', 'change'] },
          ],
          menuGrade: [
            { required: true, message: '请选择菜单级别！', trigger: ['blur', 'change'] },
          ],
          parentId: [
            { required: true, message: '请选择父级菜单！', trigger: ['blur', 'change'] },
          ],
        },
      }
    },
    methods:{
      getListData(){
        this.loading = true;
        let params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
        }
        $.ajax({
          url:server.getMenuList.url,
          type:'post',
          data:params,
          dataType:'json',
          success:res => {
            this.loading = false;
            this.menuList = res;
            this.total = res.length;
          },
          error:err =>{
            this.$message({
              message: err.responseJSON.error,
              type: 'error'
            });
          }
        });
      },
      sizeChange(val){
        this.pageSize = val;
        this.getListData();
      },
      currentChange(val){
        this.currentPage = val;
        this.getListData();
      },
      getGradeList(){
        let params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        }
        $.ajax({
          url:server.getGradeList.url,
          type:'post',
          data:params,
          dataType:'json',
          success:res => {
            this.gradeList = res.result.menuList;
          },
          error:err =>{
            this.$message({
              message: err.responseJSON.error,
              type: 'error'
            });
          }
        });
      },
      findParentName(val){
        let name = ""
        this.gradeList.forEach(item=>{
          if(item.menuId == val.parentId){
            name = item.menuName
          }
        })
        return name
      },
      addUser(){
        this.addDialogVisible = true;
      },
      addSubmit(){
        this.$refs.addForm.validate((valid) => {
          if(valid){
            this.$confirm('确认添加新菜单？').then(() => {
              let params = {
                menuName:this.addForm.menuName,
                parentId:this.addForm.parentId?this.addForm.parentId:0,
                menuGrade:this.addForm.menuGrade,
                jumpPath:this.addForm.jumpPath,
                menuPicUrl:this.addForm.menuPicUrl,
              }
              $.ajax({
                url:server.addMenuList.url,
                type:'post',
                data:params,
                dataType:'json',
                success:res => {
                  if(res.code == 1){
                    this.$message({
                      message: '新增成功！',
                      type: 'success'
                    });
                    this.addDialogVisible = false;
                    this.$refs.addForm.resetFields();
                    this.getListData();
                  }
                },
                error:err =>{
                  this.$message({
                    message: err.responseJSON.error,
                    type: 'error'
                  });
                }
              });
            }).catch(() => {});
          }else{
            return false;
          }
        });
      },
      addCancel(){
        this.getGradeList();
        this.addDialogVisible = false;
        this.$refs.addForm.resetFields();
      },
      editUser(index, row){
        this.getGradeList();
        this.editForm.id = row.id;
        this.editForm.menuId = row.menuId;
        this.editForm.menuName = row.menuName;
        this.editForm.parentId = row.parentId==0?"":row.parentId;
        this.editForm.menuGrade = row.menuGrade;
        this.editForm.jumpPath = row.jumpPath;
        this.editForm.menuPicUrl = row.menuPicUrl;
        this.editDialogVisible = true;
      },
      editSubmit(){
        this.$refs.editForm.validate((valid) => {
          if(valid){
            this.$confirm('确认修改菜单？').then(() => {
              console.log(this.editForm)
              let params = {
                id:this.editForm.id,
                menuId:this.editForm.menuId,
                menuName:this.editForm.menuName,
                parentId:this.editForm.parentId==""?0:this.editForm.parentId,
                menuGrade:this.editForm.menuGrade,
                jumpPath:this.editForm.jumpPath,
                menuPicUrl:this.editForm.menuPicUrl,
              }
              $.ajax({
                url:server.editMenuList.url,
                type:'post',
                data:params,
                dataType:'json',
                success:res => {
                  console.log(res)
                  if(res.code == 1){
                    this.$message({
                      message: '新增成功！',
                      type: 'success'
                    });
                    this.editDialogVisible = false;
                    this.$refs.editForm.resetFields();
                    this.getListData();
                  }
                },
                error:err =>{
                  this.$message({
                    message: err.responseJSON.error,
                    type: 'error'
                  });
                }
              });
            }).catch(() => {});
          }else{
            return false;
          }
        });
      },
      editCancel(){
        this.$refs.editForm.resetFields();
        this.editDialogVisible = false;
      },
      deleteUser(index, row){
        this.$confirm('确认删除该菜单？').then(() => {
          $.ajax({
            url:server.deleteMenuList.url,
            type:'get',
            data:{
              menuId:row.id
            },
            dataType:'json',
            success:res => {
              if(res.code == 1){
                this.$message({
                  message: '删除成功！',
                  type: 'success'
                });
                this.getListData();
              }else{
                this.$message({
                  message: res.msg,
                  type: 'error'
                });
                this.getListData();
              }
            },
            error:err =>{
              this.$message({
                message: err.responseJSON.error,
                type: 'error'
              });
            }
          });
        }).catch(() => {});
      },
      search(){
        this.loading = true;
        let params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
        }
        $.ajax({
          url:server.searchCustomerList.url,
          type:'get',
          data:params,
          dataType:'json',
          success:res => {
            if(res.code == 1){
              this.loading = false;
              if(!res.result){
                this.tradeList = [];
              }else{
                this.tradeList = res.result.tradeList;
                this.total = res.result.total;
              }
            }
          },
          error:err =>{
            this.$message({
              message: err.responseJSON.error,
              type: 'error'
            });
          }
        });
      },
      reset(){
        this.filter.markId = "";
        this.filter.type = "";
        this.filter.price = "";
        this.filter.count = "";
        this.filter.time = "";
        this.getListData();
      },
      getNowFormatDate(time) {
        var date = time;
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + "-" + month + "-" + strDate;
        return currentdate;
      },
    },
    mounted(){
      if(!window.sessionStorage.getItem("token"))this.$router.push({path: '/'});
      this.getListData();
      this.getGradeList();
    }
  }
</script>

<style scoped>
  .search-box{
    margin: 20px 0;
  }
</style>
